<template>
  <div class="p-4">
    <el-button type="primary" size="small" @click="handleClickAddRow" class="mb-4">新增行</el-button>
    <el-table max-height="440px" :data="tableData" border style="width: 100%">
      <el-table-column show-overflow-tooltip prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column show-overflow-tooltip prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column show-overflow-tooltip prop="address" label="地址" width="200"> </el-table-column>
      <el-table-column show-overflow-tooltip prop="address" label="地址" width="200"> </el-table-column>
      <el-table-column show-overflow-tooltip prop="address" label="地址" width="200"> </el-table-column>
      <el-table-column show-overflow-tooltip prop="address" label="地址" width="200"> </el-table-column>
      <el-table-column show-overflow-tooltip prop="address" label="地址" width="200"> </el-table-column>
      <el-table-column show-overflow-tooltip prop="address" label="地址" width="200"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180" fixed="right"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ]
    }
  },
  methods: {
    handleClickAddRow() {
      this.tableData.push({
        date: '2016-05-05',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1515 弄'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// 滚动槽
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  cursor: pointer;
}
/*
::-webkit-scrollbar-track {
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.06);
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.08);
}
//*/
// 滚动条滑块
::-webkit-scrollbar-thumb {
  border: 0px solid transparent;
  background-clip: content-box;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 11px;
}
::-webkit-scrollbar-thumb:vertical:hover,
::-webkit-scrollbar-thumb:horizontal:hover {
  background-color: rgba(0, 0, 0, 0.2);
}
</style>
